<template>
	<div class="app-contain">
		<div class="u-box mt15">
			<header class="u-header-title u-info-header">
				<a :class="showChangeType =='name'? 'current':''" href="javascript:;" @click="changeType('name')">个人信息</a>
				<a :class="showChangeType =='avatar'? 'current':''" href="javascript:;" @click="changeType('avatar')">修改头像</a>
				<a :class="showChangeType =='pass'? 'current':''" href="javascript:;" @click="changeType('pass')">密码设置</a>

			</header>
			<div class="mt20">
				<section v-show="showChangeType == 'name'">
					<div class="u-account-box">
						<form id="updateUserForm">
							<ol class="u-account-li">
								<li> <label class="u-a-title"> <span class="fsize16 c-999">昵称</span> </label> <input type="text" v-model="nameData.nickname" class="u-a-inpt"> </li>
								<li> <label class="u-a-title"> <span class="fsize16 c-999">姓 名</span> </label> <input type="text" v-model="nameData.name" class="u-a-inpt"> </li>
								<li> <label class="u-a-title"> <span class="fsize16 c-999">英文名</span> </label> <input type="text" v-model="nameData.englishName" class="u-a-inpt"> </li>
								<li> <label class="u-a-title"> </label>
									<a class="lh-reply-btn" @click="changUserInfo('name')" href="javascript:void(0)" title="修改">修&nbsp;改</a>
								</li>
							</ol>
						</form>
					</div>
				</section>

				<section v-show="showChangeType == 'pass'">
					<div class="u-account-box">
						<form id="updateMobileForm" method="post" action="">
							<ol class="u-account-li">
								<li> <label class="u-a-title"> <span class="fsize16 c-999">旧密码</span> </label> <input type="password" class="u-a-inpt" v-model="passwordData.oldPassword"> </li>
								<li> <label class="u-a-title"> <span class="fsize16 c-999">新密码</span> </label> <input type="password" class="u-a-inpt" v-model="passwordData.password"> </li>
								<li> <label class="u-a-title"> <span class="fsize16 c-999">确认密码</span> </label> <input type="password" class="u-a-inpt" v-model="configPassword"> </li>
								<li> <label class="u-a-title"> <span class="fsize16 c-999">&nbsp;</span> </label>
									<a href="javascript:void(0)" @click="changUserInfo('pass')" class="lh-reply-btn" title="提交">提&nbsp;交</a>
								</li>
							</ol>
						</form>
					</div>
				</section>
				<section v-show="showChangeType == 'avatar'" style="height: 600px;">
					<div class="u-account-box">
						<el-upload class="mb20" :action="uploadUrl" :show-file-list="false" :data="{path:'image/user/'}" :on-success="handleSuccess">
							<el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
						
						<vue-cropper class="mb20" style="width: 600px; height: 400px;" ref="cropper" :img="options.img" :outputSize="options.size" :outputType="options.outputType" :high="false" :autoCrop="true"></vue-cropper>
						

						<div style="text-align: center;">
							<a class="lh-reply-btn" @click="changUserInfo('avatar')" href="javascript:void(0)" title="修改">修&nbsp;改</a>
						</div>

					</div>
				</section>

			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import { VueCropper }  from 'vue-cropper'
	import { Notification } from 'element-ui';
	import { domainUrl } from '@/utils/index'
	import { updateInfo, avatarFileUpload } from '@/api/uc'
	export default {
		name: 'info',
		components: {
			VueCropper
		},
		computed: {
			getUserInfo() {
				return this.$store.getters.getStorageInfo;
			}
		},
		created() {
			this.domain = domainUrl();
			this.nameData = {
				id: this.getUserInfo.id,
				name: this.getUserInfo.name,
				nickname: this.getUserInfo.nickname,
				englishName: this.getUserInfo.englishName
			};
			this.passwordData["id"] = this.getUserInfo.id;
			this.avatarData["id"] = this.getUserInfo.id;
			if(this.getUserInfo.avatar) {
				this.avatarData['avatar'] = this.domain + this.getUserInfo.avatar;
				this.options.img = this.domain + this.getUserInfo.avatar;
			} else {
				this.options.img = './static/image/avatar-boy.gif' ;
				this.avatarData['avatar'] = null;
			}
		},
		data() {
			return {
				uploadUrl: "http://testelp.quality-in.com/upload/fileUpload",
				fileImgName:'',
				options: { //剪裁
					img: '',
					size: 1,
					full: false,
					
				},
				domain: "",
				showChangeType: "name",
				nameData: {
					id: "",
					name: "",
					nickname: '',
				},
				passwordData: {
					id: '',
					oldPassword: '',
					password: ''
				},
				avatarData: {
					id: "",
					avatar: '',
				},

				configPassword: ''
			}
		},
		methods: {
			changeType(val) {
				this.showChangeType = val;
			},
			changUserInfo(val) {
				switch(val) {
					case 'name':
						this.updateInfo(this.nameData, val);
						break;
					case 'pass':
						let data = this.passwordData;
						if(data.password.length < 5) {
							Notification.error({
								title: '提示',
								message: '密码必须大于5位数'
							});
						} else if(data.password != this.configPassword) {
							Notification.error({
								title: '提示',
								message: '请输入同样的密码！'
							});
						} else {
							this.updateInfo(this.passwordData, val);
						}

						break;
					case 'avatar':
						//						this.updateInfo(this.nameData,val);
						this.$refs.cropper.getCropData((data) => {
							let file = this.convertBase64UrlToBlob(data)
							file.name = this.fileImgName;
							 let formData = new FormData();
					        // 通过append向form对象添加数据
					        formData.append('file', file,file.name);
					        formData.append('path', 'image/user/');
					        formData.append('entityId', this.getUserInfo.id);
							this.avatarFileUpload(formData);
						})
						break;
					default:
						break;
				}

			},
			
			updateInfo(data, val) {
				updateInfo(data).then((res) => {
					let userInfor = this.getUserInfo;
					switch(val) {
						case 'name':
							userInfor.name = this.nameData.name;
							userInfor.nickname = this.nameData.nickname;
							userInfor.englishName = this.nameData.englishName;
							this.$store.commit('SET_STORAGE', userInfor);
							Notification.success({
								title: '提示',
								message: '修改成功'
							});
							break;
						case 'avatar':
							userInfor.avatar = this.avatarData.avatar;
							this.$store.commit('SET_STORAGE', userInfor);
							Notification.success({
								title: '提示',
								message: '修改头像成功'
							});
							break;
						default:
							break;
					}

				})
			},
			handleSuccess(res, file) {
				this.options.img = domainUrl() + res.entity;
				this.fileImgName = file.name;
				
			},
			avatarFileUpload(data){
				let that = this;
				axios.post('http://testelp.quality-in.com/upload/fileUpload',data).then((response)=>{
				    that.avatarData.avatar = response.data.entity;
				    that.updateInfo(that.avatarData,'avatar');
				    
				});
				
			},
			// 将base64的图片转换为file文件
			convertBase64UrlToBlob(urlData) {
				let bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
				//处理异常,将ascii码小于0的转换为大于0
				let ab = new ArrayBuffer(bytes.length);
				let ia = new Uint8Array(ab);
				for(var i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i);
				}
				return new Blob([ab],{ type: 'image/jpeg' });
			},

		}
	}
</script>

<style scoped lang="scss">
	@import '../../assets/style/uCenter-nxb.scss'
</style>